import React from 'react';
import { Drawer } from 'antd';
import styles from './index.less';

const Index = props => {
  const {
    destroyOnClose = true, // 关闭时销毁 Drawer 里的子元素
    maskClosable = true, // 点击蒙层是否允许关闭
    placement = 'right', // 抽屉的方向 => top | right | bottom | left
    width = 1300, // 宽度

    title, // 标题
    visible, // Drawer 是否可见
    onClose, // 点击遮罩层或右上角叉或取消按钮的回调
    onCancel,

    afterVisibleChange, // 切换抽屉时动画结束后的回调

    children,

    afterClose, // Drawer 完全关闭后的回调
    footer = null, // 底部内容，当不需要默认底部按钮时，可以设为 footer={null}

    ...rest
  } = props;

  return (
    <Drawer
      destroyOnClose={destroyOnClose}
      maskClosable={maskClosable}
      placement={placement}
      width={width}
      {...rest}
      title={title}
      visible={visible}
      onClose={onClose || onCancel}
      afterVisibleChange={currentVisible => {
        if (afterVisibleChange) {
          afterVisibleChange(currentVisible);
        }
        if (!currentVisible && afterClose) {
          afterClose();
        }
      }}
    >
      {children}

      {footer !== null && <div className={styles.footer}>{footer}</div>}
    </Drawer>
  );
};

Index.displayName = 'Drawer';
export default Index;
